import React, { useState, useEffect } from 'react'
import { Cascader, Form, Input, DatePicker, Space, Upload, Button, Select, Row, Col } from 'antd';
import { DeleteOutlined, InfoCircleOutlined, PlusOutlined, MinusCircleOutlined, UploadOutlined } from '@ant-design/icons';
import { request } from 'umi';
import moment from 'moment';
import "./index.less"
export default function index(props: any) {
    const { RangePicker } = DatePicker;
    const { TextArea } = Input;
    const [options, setOptions] = useState([])
    const [imgShow, setImgShow] = useState(true)
    const getAddress = (addressLevel = 1, parentId: any) => {
        request("/campus/campusweb/address/queryAddressForFourLinkage", {
            method: "post",
            data: {
                addressLevel,
                parentId,
            }
        }).then(res => {
            res = res.data.map((ele: any) => {
                return {
                    value: ele.addressCode,
                    label: ele.addressName,
                    isLeaf: false,
                }
            })
            setOptions(res)
        })
    }
    useEffect(() => {
        getAddress(1, "")
    }, [])
    const loadData = (selectedOptions: any) => {
        const targetOption = selectedOptions[selectedOptions.length - 1];
        targetOption.loading = true;
        request("/campus/campusweb/address/queryAddressForFourLinkage", {
            method: "post",
            data: {
                addressLevel: 2,
                parentId: targetOption.value,
            }
        }).then(res => {
            const ress = res.data.map((ele: any) => {
                return {
                    label: ele.addressName,
                    value: ele.addressCode
                }
            })

            targetOption.loading = false;
            targetOption.children = [
                ...ress
            ];
            setOptions([...options]);
        })
    };
    const normFileActiveImg = (e: any) => {
        if (Array.isArray(e)) {
            return e;
        }
        e.fileList = e.fileList.slice(-1);
        return e?.fileList;
    };
    const normFileActiveThumb = (e: any) => {
        if (Array.isArray(e)) {
            return e;
        }
        e.fileList = e.fileList.slice(-1);
        return e?.fileList;
    }
    const onChange = () => {

    }
    return (
        <div className='createActive'>
            <div className='createActive-Form'>
                <h1> <span className='icon'></span> 请填写活动的基本信息</h1>
                <Form form={props.baseForm} name="control-hooks" layout={'vertical'}>
                    <Row gutter={16}>
                        <Col span={8} offset={1} className="gutter-row">
                            <Form.Item
                                label="活动名称"
                                name="activityName"
                                rules={[{
                                    required: true, message: '请输入活动名称!'
                                }]}>
                                <Input
                                    style={{ borderRadius: "5px", width: "400px" }}
                                    placeholder='请输入活动名称'
                                />
                            </Form.Item>
                        </Col>
                        <Col className="gutter-row" span={8} offset={1}>
                            <Form.Item
                                label="地区选择" name="selectAddress" rules={[{
                                    required: true,
                                    message: '请选择地区!'
                                }]}>
                                <Cascader
                                    style={{ borderRadius: "10px", width: "400px" }}
                                    options={options} loadData={loadData}
                                    placeholder={"请选择地区"} />
                            </Form.Item>
                        </Col>
                    </Row>
                    <Row gutter={16}>
                        <Col span={8} offset={1} className="gutter-row">
                            <Form.Item
                                label="活动时间"
                                name="range-picker"
                                rules={[{
                                    required: true, message: '请选择活动时间!'
                                }]}
                                style={{ width: "400px" }}>
                                <RangePicker
                                    style={{ width: "100%" }}

                                />
                            </Form.Item>
                        </Col>
                        <Col className="gutter-row" span={8} offset={1}>
                            <Form.Item
                                name="activitySite"
                                label="活动地点">
                                <Input
                                    placeholder='请输入活动地址'
                                    style={{ width: "400px", borderRadius: "5px" }}
                                />
                            </Form.Item>
                        </Col>
                    </Row>
                    <Row gutter={16}>
                        <Col span={8} offset={1} className="gutter-row">
                            <Form.Item
                                name="activityOrganizers"
                                label="活动主办方"
                            >
                                <Input placeholder='请输入活动主办方' style={{ width: "400px", borderRadius: "5px" }} />
                            </Form.Item>
                        </Col>
                        <Col className="gutter-row" span={8} offset={1}>
                            <Form.Item
                                label="活动内容"
                                name="activityContent"
                                rules={[{
                                    required: true,
                                    message: '请输入活动内容!'
                                }]}
                            >
                                <TextArea rows={2} style={{ width: "400px", borderRadius: "5px" }} placeholder="请输入活动内容"
                                />
                            </Form.Item>
                        </Col>
                    </Row>
                    <Row gutter={16}>
                        <Col span={8} offset={1} className="gutter-row">
                            <Form.Item
                                name="activeImg"
                                valuePropName="fileList"
                                rules={[{ required: true, message: '请上传活动图!' }]}
                                label="活动图"
                                getValueFromEvent={normFileActiveImg}
                                extra={<>
                                    <InfoCircleOutlined style={{ color: "orange" }} /> <span style={{ color: "#ccc", marginLeft: "5px" }}>推荐尺寸: 1035*261</span>
                                </>}
                            >
                                <Upload
                                    listType="picture-card"
                                    name='multipartFile'
                                    action='/campus/campusweb/upload/pictureUpload'
                                >
                                    <div>
                                        <p style={{ fontSize: "20px" }}>+</p>
                                        <p>添加图片</p>
                                    </div>
                                </Upload>
                            </Form.Item>
                        </Col>
                        <Col className="gutter-row" span={8} offset={1}>
                            <Form.Item
                                label="缩略图"
                                name="activeThumb"
                                valuePropName="fileList"
                                getValueFromEvent={normFileActiveThumb}
                                style={{ width: "80px" }}
                                rules={[{ required: true, message: '请上传缩略图!' }]}
                                extra={<>
                                    <InfoCircleOutlined style={{ color: "orange" }} /><span style={{ color: "#ccc", marginLeft: "5px" }}>推荐尺寸: 168*216</span>
                                </>}
                            >
                                <Upload
                                    listType="picture-card"
                                    name='multipartFile'
                                    action='/campus/campusweb/upload/pictureUpload'
                                >
                                    <div>
                                        <p style={{ fontSize: "20px" }}>+</p>
                                        <p>添加图片</p>
                                    </div>
                                </Upload>
                            </Form.Item>
                        </Col>
                    </Row>
                    <h1> <span className='icon'></span> 请编辑活动日程规划 <i>(可添加多选)</i> </h1>
                    <Row gutter={16}>
                        <Col className="gutter-row" span={8} offset={1}>
                            <Form.List name="users">
                                {(fields, { add, remove }) => (
                                    <>
                                        {fields.map(({ key, name, ...restField }) => (
                                            <Space key={key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
                                                <Form.Item
                                                    {...restField}
                                                    name={[name, 'first']}
                                                    rules={[{ required: true, message: 'Missing first name' }]}
                                                >
                                                    <Input placeholder="Last Name" />
                                                </Form.Item>
                                                <Form.Item
                                                    {...restField}
                                                    name={[name, 'last']}
                                                    rules={[{ required: true, message: 'Missing last name' }]}
                                                >

                                                    <DatePicker onChange={onChange} />
                                                </Form.Item>
                                                <DeleteOutlined
                                                    onClick={() => remove(name)}
                                                    style={{
                                                        color: "red",
                                                        cursor: "pointer"
                                                    }}
                                                />
                                            </Space>
                                        ))}
                                        <Form.Item>
                                            <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                                                Add field
                                            </Button>
                                        </Form.Item>
                                    </>
                                )}
                            </Form.List>
                        </Col>
                    </Row>
                </Form>
            </div>
        </div >
    )
}
